<template>
    <view class="page">
        <!--  -->
        <view class="card-data">
            <!-- 会员 -->
            <view class="member-data">
                <view class="phone">
                    <text>188****8888</text>
                </view>
                <view class="vip-level">
                    <image src="/static/rank.png"></image>
                    <text>v1</text>
                </view>
            </view>
            <!-- 余额 -->
            <view class="balance-data">
                <view class="data">
                    <view class="price">{{isPirce?'10000.00':'*****'}}</view>
                    <view class="title" @click="isPirce = !isPirce">
                        <text>余额</text>
                        <text class="iconfont" :class="isPirce?'icon-eye-on':'icon-eye-off'"></text>
                    </view>
                </view>
            </view>
            <!-- 付款码 -->
            <view class="payment-code">
                <view class="number" @click="isNumber = !isNumber">
                    <text>{{isNumber?'7118 5881 7024 5795':'7118 **** **** 5795'}}</text>
                    <text>查看数字</text>
                </view>
                <view class="code">
                    <image src="/static/img/code.png" mode=""></image>
                </view>
                <view class="hint">
                    <text>付款码每30秒自动更新，请在店内消费时使用</text>
                </view>
            </view>
            <!-- 其他支付方式 -->
            <view class="payment-way">
                <view class="title">
                    <text>其他支付方式</text>
                </view>
                <view class="btn" @click="isPayWay = true">
                    <text>{{PayWayText}}</text>
                    <text class="tag">点击选择</text>
                </view>
            </view>
        </view>
        <!-- 支付方式选择窗口 -->
        <view class="pay-way-win" @click="isPayWay = false">
            <view class="cu-modal bottom-modal" :class="{'show':isPayWay}">
                <view class="cu-dialog">
                    <view class="pay-list">
                        <view class="list" @click.stop="onPayWay(0)">
                            <view class="pay">
                                <image src="/static/ye_pay.png" mode=""></image>
                                <text>余额支付</text>
                            </view>
                            <view class="check">
                                <text class="iconfont" :class="PayWay===0?'icon-checked action':'icon-check'"></text>
                            </view>
                        </view>
                        <view class="list" @click.stop="onPayWay(1)">
                            <view class="pay">
                                <image src="/static/wx_pay.png" mode=""></image>
                                <text>微信支付</text>
                            </view>
                            <view class="check">
                                <text class="iconfont" :class="PayWay===1?'icon-checked action':'icon-check'"></text>
                            </view>
                        </view>
                        <view class="list" @click.stop="onPayWay(2)">
                            <view class="pay">
                                <image src="/static/zfb_pay.png" mode=""></image>
                                <text>支付宝支付</text>
                            </view>
                            <view class="check">
                                <text class="iconfont" :class="PayWay===2?'icon-checked action':'icon-check'"></text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isPayWay: false,
            PayWay: 0,
            PayWayText: '余额支付',
            // 数字
            isNumber: false,
            // 金额
            isPirce: false,
        };
    },
    methods: {
        /**
         * 支付方式选择点击
         * @param {Number} type 0 余额 1 微信 2 支付宝
         */
        onPayWay(type) {
            this.PayWay = type;
            switch (type) {
                case 0:
                    this.PayWayText = '余额支付';
                    break;
                case 1:
                    this.PayWayText = '微信支付';
                    break;
                case 2:
                    this.PayWayText = '支付宝支付';
                    break;
            }
            this.isPayWay = false;
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
}

.card-data {
    width: 90%;
    height: 90%;
    margin: 40rpx auto 0;
    background-color: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
    // 会员
    .member-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 200rpx;
        .phone {
            display: flex;
            align-items: center;
            height: 80rpx;
            text {
                font-size: 32rpx;
                font-weight: bold;
                color: #222222;
            }
        }
        .vip-level {
            display: flex;
            align-items: center;
            padding: 10rpx 40rpx;
            background-color: $base;
            border-radius: 100rpx;
            image {
                width: 24rpx;
                height: 24rpx;
            }
            text {
                font-size: 24rpx;
                color: #ffe678;
                margin-left: 10rpx;
            }
        }
    }
    // 余额
    .balance-data {
        display: flex;
        align-items: center;
        width: 100%;
        height: 200rpx;
        .data {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 90%;
            .price {
                display: flex;
                align-items: center;
                height: 80rpx;
                font-size: 56rpx;
                color: $base;
            }
            .title {
                display: flex;
                align-items: center;
                text {
                    font-size: 28rpx;
                    color: #959595;
                    margin-right: 20rpx;
                }
            }
        }
    }
    // 付款码
    .payment-code {
        padding: 0 4%;
        .number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 80rpx;
            text {
                font-size: 28rpx;
                color: #555555;
                margin-right: 20rpx;
            }
        }
        .code {
            width: 100%;
            height: 256rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .hint {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 80rpx;
            text {
                font-size: 26rpx;
                color: #959595;
            }
        }
    }
    // 其他支付方式
    .payment-way {
        width: 100%;
        height: 200rpx;
        .title {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 80rpx;
            text {
                font-size: 30rpx;
                font-weight: bold;
                color: #555555;
            }
        }
        .btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80%;
            height: 70rpx;
            margin: 20rpx auto;
            background: linear-gradient(to right, $base, $change-clor);
            border-radius: 70rpx;
            box-shadow: 0 10rpx 10rpx $base;
            text {
                color: #ffffff;
                font-size: 28rpx;
            }
            .tag {
                position: absolute;
                right: 0;
                top: -20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 140rpx;
                height: 40rpx;
                background-color: #f37b1d;
                border-radius: 10rpx;
                text {
                    font-size: 24rpx;
                }
            }
        }
    }
}

/* 支付方式选择 */
.pay-way-win {
    .cu-dialog {
        border-radius: 20rpx 20rpx 0 0 !important;
    }
    .pay-list {
        padding: 20rpx 4%;
        .list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 100rpx;
            border-bottom: 2rpx solid #f6f6f6;
            .pay {
                display: flex;
                align-items: center;
                image {
                    width: 44rpx;
                    height: 44rpx;
                }
                text {
                    font-size: 28rpx;
                    color: #222222;
                    margin-left: 20rpx;
                }
            }
            .check {
                display: flex;
                align-items: center;
                text {
                    font-size: 38rpx;
                    color: #959595;
                }
                .action {
                    color: $base;
                }
            }
        }
    }
}
</style>
